<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>七段数码管计时器</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #111;
            touch-action: manipulation;
            font-family: Arial, sans-serif;
        }
        .timer-container {
            text-align: center;
            width: 100%;
        }
        .timer {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin: 30px 0;
        }
        .segment-digit {
            width: 80px;
            height: 140px;
            position: relative;
        }
        .segment {
            position: absolute;
            background-color: #ff3333; /* 数码管红色 */
            border-radius: 5px;
            opacity: 0.1; /* 默认熄灭 */
        }
        /* 七段数码管的 7 个段（a-g） */
        .segment-a { top: 0; left: 10px; width: 60px; height: 10px; }
        .segment-b { top: 10px; right: 0; width: 10px; height: 60px; }
        .segment-c { bottom: 10px; right: 0; width: 10px; height: 60px; }
        .segment-d { bottom: 0; left: 10px; width: 60px; height: 10px; }
        .segment-e { bottom: 10px; left: 0; width: 10px; height: 60px; }
        .segment-f { top: 10px; left: 0; width: 10px; height: 60px; }
        .segment-g { top: 70px; left: 10px; width: 60px; height: 10px; }
        /* 冒号（时间分隔符） */
        .colon {
            width: 20px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 30px;
        }
        .colon-dot {
            width: 10px;
            height: 10px;
            background-color: #ff3333;
            border-radius: 50%;
        }
        .buttons {
            display: flex;
            justify-content: center;
            gap: 20px;
        }
        button {
            padding: 15px 30px;
            font-size: 1.2rem;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            color: white;
            font-weight: bold;
        }
        #startBtn {
            background-color: #4CAF50; /* 绿色 */
        }
        #stopBtn {
            background-color: #f44336; /* 红色 */
        }
    </style>
</head>
<body>
    <div class="timer-container">
        <div class="timer" id="timer">
            <div class="segment-digit" id="min1">
                <div class="segment segment-a"></div>
                <div class="segment segment-b"></div>
                <div class="segment segment-c"></div>
                <div class="segment segment-d"></div>
                <div class="segment segment-e"></div>
                <div class="segment segment-f"></div>
                <div class="segment segment-g"></div>
            </div>
            <div class="segment-digit" id="min2">
                <div class="segment segment-a"></div>
                <div class="segment segment-b"></div>
                <div class="segment segment-c"></div>
                <div class="segment segment-d"></div>
                <div class="segment segment-e"></div>
                <div class="segment segment-f"></div>
                <div class="segment segment-g"></div>
            </div>
            <div class="colon">
                <div class="colon-dot"></div>
                <div class="colon-dot"></div>
            </div>
            <div class="segment-digit" id="sec1">
                <div class="segment segment-a"></div>
                <div class="segment segment-b"></div>
                <div class="segment segment-c"></div>
                <div class="segment segment-d"></div>
                <div class="segment segment-e"></div>
                <div class="segment segment-f"></div>
                <div class="segment segment-g"></div>
            </div>
            <div class="segment-digit" id="sec2">
                <div class="segment segment-a"></div>
                <div class="segment segment-b"></div>
                <div class="segment segment-c"></div>
                <div class="segment segment-d"></div>
                <div class="segment segment-e"></div>
                <div class="segment segment-f"></div>
                <div class="segment segment-g"></div>
            </div>
        </div>
        <div class="buttons">
            <button id="startBtn">启动</button>
            <button id="stopBtn">停止</button>
        </div>
    </div>

    <script>
        const startBtn = document.getElementById('startBtn');
        const stopBtn = document.getElementById('stopBtn');
        
        let seconds = 0;
        let timer;
        let isRunning = false;

        // 七段数码管编码（a-g 对应 0-6）
        const digitSegments = [
            [1, 1, 1, 1, 1, 1, 0], // 0
            [0, 1, 1, 0, 0, 0, 0], // 1
            [1, 1, 0, 1, 1, 0, 1], // 2
            [1, 1, 1, 1, 0, 0, 1], // 3
            [0, 1, 1, 0, 0, 1, 1], // 4
            [1, 0, 1, 1, 0, 1, 1], // 5
            [1, 0, 1, 1, 1, 1, 1], // 6
            [1, 1, 1, 0, 0, 0, 0], // 7
            [1, 1, 1, 1, 1, 1, 1], // 8
            [1, 1, 1, 1, 0, 1, 1]  // 9
        ];

        // 更新数码管显示
        function updateDisplay() {
            const mins = Math.floor(seconds / 60).toString().padStart(2, '0');
            const secs = (seconds % 60).toString().padStart(2, '0');
            
            setDigit('min1', parseInt(mins[0]));
            setDigit('min2', parseInt(mins[1]));
            setDigit('sec1', parseInt(secs[0]));
            setDigit('sec2', parseInt(secs[1]));
        }

        // 设置单个数字的显示
        function setDigit(id, number) {
            const digit = document.getElementById(id);
            const segments = digit.querySelectorAll('.segment');
            
            digitSegments[number].forEach((active, index) => {
                segments[index].style.opacity = active ? '1' : '0.1';
            });
        }

        // 启动计时器
        startBtn.addEventListener('click', () => {
            if (!isRunning) {
                timer = setInterval(() => {
                    seconds++;
                    updateDisplay();
                }, 1000);
                isRunning = true;
            }
        });

        // 停止计时器
        stopBtn.addEventListener('click', () => {
            clearInterval(timer);
            isRunning = false;
        });

        // 初始化显示
        updateDisplay();
    </script>
</body>
</html>